<template>
  <div ref="info" class="box-card">
    <i class="el-icon-close closeRight" @click.stop="clearJumpId" />
    <div class="head-box-card padding20 clearfix">
      <el-row v-if="showInfo" class="top_cus_info">
        <el-col :span="18">
          <el-col :span="8">
            <p>短信标题</p>
            <p>{{ this.$props.id.messageTitle }}</p>
          </el-col>
          <el-col :span="8">
            <p>发送时间</p>
            <p>{{ this.$props.id.sendTime }}</p>
          </el-col>
          <el-col :span="8">
            <p>发送短息平台</p>
            <p>{{ this.$props.id.sendStatus === true ? '已发送' :"未发送" }}</p>
          </el-col>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="openEditor">编辑</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="height3" />
    <div v-if="showInfo" class="padding20">
      <el-tabs v-model="activeName">
        <el-tab-pane label="会员详情" name="first">
          <div class="infoBox">
            <el-col :span="12">短信标题：{{ $props.id.messageTitle }}</el-col>
            <el-col :span="12">发送时间：{{ $props.id.sendTime }}</el-col>
            <el-col :span="12">发送短信平台：{{ $props.id.sendStatus === true ? '已发送' :"未发送" }}</el-col>
            <el-col :span="12">发送用户：{{ $props.id.sendMemberStatus === true ? '已发送' :"未发送" }}</el-col>
            <el-col :span="12">应发人数：{{ $props.id.planMemberCount }}</el-col>
            <el-col :span="12">实发人数：{{ $props.id.actualMemberCount }}</el-col>
            <el-col :span="12">发送人：{{ $props.id.operator }}</el-col>
            <el-col :span="12">创建时间：{{ $props.id.creationTime }}</el-col>
          </div>
        </el-tab-pane>
        <el-tab-pane label="发送人员" name="second">
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="nickName" label="昵称" />
            <el-table-column prop="phone" label="手机号码" />
            <el-table-column label="分类">
              <template slot-scope="scope">{{ getMemberLevel(scope.row.grouping) }}</template>
            </el-table-column>
          </el-table>
            <el-pagination
              style="margin:5px 5px 0 0"
              class="right"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page.pageNo"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="page.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalCount"
            ></el-pagination>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div v-if="dialogVisible">
      <el-dialog
        center
        title="更新发送人员"
        :visible.sync="dialogVisible"
        :modal-append-to-body="false"
        :before-close="handleClose"
      >
        <transfer
          v-model="value4"
          style="text-align: left; display: inline-block"
          filterable
          :left-default-checked="[]"
          :right-default-checked="[]"
          :titles="['可选择人员', '已选择人员']"
          :button-texts="['到左边', '到右边']"
          :format="{
            noChecked: '${total}',
            hasChecked: '${checked}/${total}'
          }"
          :data="data"
          @change="handleChange"
        >
          <span slot-scope="{ option }">{{ option.label }}</span>
        </transfer>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import mmUrl from "~/utils/utilUrl";
import { createDics } from "~/utils/util";
import transfer from "~/components/commom/transfer";
export default {
  components: {
    transfer
  },
  props: ["id", "pageHeight", "updateRight", "pageHeight"],
  data() {
    return {
       page: {
        maxResultCount: 0,
        pageNo: 0,
        pageSize: 10,
        skipCount: 0
      },
      totalCount: 0,
      initData: {},
      showInfo: true,
      activeName: "first",
      tableData: [],
      totalCount: 0,
      dialogVisible: false,
      value4: [1],
      data: [],
      changeSubmitVal: []
    };
  },
  mounted() {
    this.getSendDTOS();
    this.$nextTick(() => {
      this.$refs["info"]
        ? (this.$refs["info"].style.height = this.$props.pageHeight + "px")
        : "";
    });
  },
  methods: {
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getSendDTOS()
    },
    handleCurrentChange(val) {
      this.page.pageNo = val;
      this.getSendDTOS()
    },
    getMemberLevel(res) {
      return this.dics.MEMBER_LEVEL.children
        ? this.dics.MEMBER_LEVEL.children.filter(v => v.dicCode === res)[0]
            .dicName
        : "";
    },
    submit() {
      this.$post({
        url: "/manage/messages/createMessagetTarget",
        data: {
          item: {
            uid: this.$props.id.id
          },
          memberIds: this.changeSubmitVal
        }
      }).then(() => {
        this.$message({
          type: "success",
          message: "操作成功"
        });
        this.dialogVisible = false;
      });
    },
    handleChange(value) {
      this.changeSubmitVal = value.slice(1);
    },
    handleClose() {
      this.dialogVisible = false;
    },
    openEditor() {
      this.dialogVisible = true;
    },
    getSendDTOS() {
      this.$post({
        url: "/manage/messages/getMessagetTargetDTOs",
        data: {
          keyword: "",
          page:this.page,
          uid: this.$props.id.id
        }
      }).then(res => {
        this.tableData = res.items.items;
        this.totalCount = res.items.totalCount;
        this.dics = createDics(res.dics, "dicCode");
      });
    },
    clearJumpId() {
      this.$emit("clearJumpId");
    },
    jumpId() {
      this.$emit("editor");
    },
    getFilePhtot(res) {
      this.$post({
        url: mmUrl.file.getfiles,
        data: {
          dataId: this.$props.id,
          typeCode: res
        }
      }).then(res => {
        this.photo = res.length ? res[0].fileUrl : "";
      });
    }
  }
};
</script>

<style lang='scss'>
.infoBox {
  font-weight: 500;
  font-size: 14px;
  div {
    min-height: 50px;
  }
}
img {
  vertical-align: top;
  max-width: 480;
  max-height: 360px;
}
</style>
